<template>
  <div class="component-container feature-out">
    <div ref="searchDiv">
      <div class="filter-container">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          size="small"
          align="left"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          class="filter-item"
          style="width: 360px;"
          @change="onDatePickerChange"
        ></el-date-picker>
        <el-select
          v-model="listQuery.search.riskLevel"
          size="small"
          placeholder="风险等级"
          clearable
          class="filter-item"
          style="width:195px;"
        >
          <el-option
            v-for="(item, index) in riskLevel"
            :key="index"
            :value="item.key"
            :label="item.key"
          ></el-option>
        </el-select>
        <el-input
          v-model="listQuery.search.name"
          size="small"
          placeholder="借款人姓名"
          clearable
          class="filter-item"
          style="width:195px;"
        ></el-input>
        <el-input
          v-model="listQuery.search.idCardNo"
          size="small"
          placeholder="身份证号"
          clearable
          class="filter-item"
          style="width:195px;"
        ></el-input>
        <el-input
          v-model="listQuery.search.mobile"
          size="small"
          placeholder="手机号"
          clearable
          class="filter-item"
          style="width:195px;"
        ></el-input>
        <el-button
          @click="handleFilter"
          size="small"
          type="primary"
          class="filter-item"
          ref="btnQuery"
        >
          查询
        </el-button>
        <el-button
          @click="handleReset"
          size="small"
          type="primary"
          class="filter-item"
          ref="btnRefresh"
        >
          重置
        </el-button>
      </div>
      <div style="display: flex;justify-content: flex-end;margin-bottom: 12px;">
        <el-button type="primary" size="small" @click="openRiskSet">
          风险等级管理
        </el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      border
      fit
      highlight-current-row
      :max-height="tableHeight"
      style="width: 100%;margin-bottom: 12px;"
    >
      <el-table-column
        label="查询时间"
        width="160px"
        prop="searchTime"
        align="center"
      />
      <el-table-column
        label="姓名"
        width="160px"
        prop="nameEncrypt"
        align="center"
      />
      <el-table-column
        label="身份证号"
        min-width="200px"
        prop="idCardNoEncrypt"
        align="center"
      />
      <el-table-column
        label="手机号"
        prop="mobileEncrypt"
        align="center"
        width="200px"
      />
      <el-table-column
        label="行为风险评分"
        prop="score"
        align="center"
        width="200px"
      />
      <el-table-column
        label="风险等级"
        prop="risk_level"
        align="center"
        width="200px"
      >
        <template slot-scope="scope">
          <el-tag
            size="mini"
            :type="
              scope.row.risk_level === 'IV级预警'
                ? 'danger'
                : scope.row.risk_level === 'III级预警'
                ? 'warning'
                : scope.row.risk_level === 'I级预警'
                ? 'success'
                : ''
            "
            >{{ scope.row.risk_level }}</el-tag
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="listQuery.page"
      :page-sizes="[10, 20, 50]"
      :page-size="listQuery.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <el-dialog
      :modal-append-to-body="false"
      title="风险等级管理"
      :visible.sync="formVisible"
      :close-on-click-modal="false"
      width="700px"
    >
      <div style="text-align: center;">
        <span v-for="(item, index) in riskLoanGet" :key="index">
          <span>{{ item.start }}</span>
          <el-tag :type="item.type">{{ item.name }}</el-tag>
          <span>{{ item.end }}</span>
          <el-input-number
            v-model="item.value"
            v-if="item.number !== 4"
            controls-position="right"
            :min="0"
            :max="9999"
            size="mini"
            style="width: 100px"
          ></el-input-number>
        </span>
        <!-- <el-tag type="danger">IV级预警</el-tag>
        <span>≤</span>
        <el-input-number
          controls-position="right"
          :min="0"
          :max="9999"
          size="mini"
          style="width: 100px"
        ></el-input-number>
        <span>&lt;</span>
        <el-tag type="warning">III级预警</el-tag>
        <span>≤</span>
        <el-input-number
          controls-position="right"
          :min="0"
          :max="9999"
          size="mini"
          style="width: 100px"
        ></el-input-number>
        <span>&lt;</span>
        <el-tag>II级预警</el-tag>
        <span>≤</span>
        <el-input-number
          controls-position="right"
          :min="0"
          :max="9999"
          size="mini"
          style="width: 100px"
        ></el-input-number>
        <span>&lt;</span>
        <el-tag type="success">I级预警</el-tag> -->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="formVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="riskLevelSave()">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import {
  getLoanAfterList,
  getLoanRisk,
  saveLoanRisk
} from '@/api/risksystem/loanWarning/index'

@Component({
  name: 'accountDetail',
  components: {}
})
export default class extends Vue {
  private startDate = new Date().setTime(
    new Date().getTime() - 3600 * 1000 * 24 * 7
  )
  private endDate = new Date()
  private dateRange = [
    this.formatDate(new Date(this.startDate)),
    this.formatDate(new Date(this.endDate))
  ]
  // 公共查询对象

  private listQuery: any = {
    search: {
      startTime: Date.parse(this.dateRange[0]) / 1000,
      endTime: Date.parse(this.dateRange[1]) / 1000,
      idCardNo: undefined,
      name: undefined,
      mobile: undefined,
      riskLevel: undefined
    },
    limit: 10,
    page: 1
  }
  private formVisible = false
  private total = 0
  private tableHeight: any = null
  private tableData = []
  private riskLevel: any = [
    { key: 'I级预警' },
    { key: 'II级预警' },
    { key: 'III级预警' },
    { key: 'IV级预警' }
  ]
  private riskLoanGet: any = [
    {
      name: 'IV级预警',
      type: 'danger',
      start: '',
      end: '≤',
      value: null,
      number: 1
    },
    {
      name: 'III级预警',
      type: 'warning',
      start: '<',
      end: '≤',
      value: null,
      number: 2
    },
    {
      name: 'II级预警',
      type: '',
      start: '<',
      end: '≤',
      value: null,
      number: 3
    },
    {
      name: 'I级预警',
      type: 'success',
      start: '<',
      end: '',
      value: null,
      number: 4
    }
  ]
  private riskLoanSave: any = []
  @Watch('dateRange')
  private onDatePickerChange(value: boolean) {
    this.listQuery.search.startTime = this.dateRange
      ? Date.parse(this.dateRange[0]) / 1000
      : undefined
    this.listQuery.search.endTime = this.dateRange
      ? Date.parse(this.dateRange[1]) / 1000
      : undefined
  }
  created() {}
  mounted() {
    this.init()
    this.getList()
  }
  beforeDestroy() {
    // 摧毁监听事件
    window.onresize = null
  }
  // 表格高度
  private init() {
    var _this = this
    this.$nextTick(() => {
      this.tableHeight =
        window.innerHeight - (this.$refs.searchDiv as any).offsetHeight - 240
    })
    window.onresize = () => {
      this.$nextTick(() => {
        this.tableHeight =
          window.innerHeight - (this.$refs.searchDiv as any).offsetHeight - 240
      })
    }
  }
  // 列表数据
  private async getList() {
    try {
      const { data } = await getLoanAfterList(this.listQuery)
      this.total = data.total
      this.tableData = data.list
    } catch (error) {
      console.log(error)
    } finally {
      console.log()
    }
  }
  // 搜索
  private handleFilter() {
    this.listQuery.page = 1
    this.getList()
  }
  // 重置
  private handleReset() {
    this.dateRange = [
      this.formatDate(new Date(this.startDate)),
      this.formatDate(new Date(this.endDate))
    ]
    this.listQuery = {
      search: {
        startTime: Date.parse(this.dateRange[0]) / 1000,
        endTime: Date.parse(this.dateRange[0]) / 1000,
        idCardNo: undefined,
        name: undefined,
        mobile: undefined,
        riskLevel: undefined
      },
      limit: 10,
      page: 1
    }
    this.getList()
  }
  // 分页
  // 跳转页码查询
  handleCurrentChange(val: any) {
    this.listQuery.page = val
    this.getList()
  }
  // size切换查询
  handleSizeChange(val: any) {
    this.listQuery.limit = val
    this.getList()
  }
  // 等级配置弹框
  private async openRiskSet() {
    this.formVisible = true
    try {
      const { data } = await getLoanRisk()
      this.riskLoanGet[0].value = data[0]['<=']
      this.riskLoanGet[1].value = data[1]['<=']
      this.riskLoanGet[2].value = data[2]['<=']
    } catch (error) {
      console.log(error)
    }
  }
  // 保存等级配置
  private async riskLevelSave() {
    this.riskLoanSave = [
      {
        name: 'IV级预警',
        '<=': this.riskLoanGet[0].value,
        number: 1
      },
      {
        name: 'III级预警',
        '>': this.riskLoanGet[0].value,
        '<=': this.riskLoanGet[1].value,
        number: 2
      },
      {
        name: 'II级预警',
        '>': this.riskLoanGet[1].value,
        '<=': this.riskLoanGet[2].value,
        number: 3
      },
      {
        name: 'I级预警',
        '>': this.riskLoanGet[2].value,
        number: 4
      }
    ]
    try {
      const { data } = await saveLoanRisk({
        riskLevelConfig: this.riskLoanSave
      })
      this.formVisible = false
      this.getList()
    } catch (error) {
      console.log(error)
    }
  }
  private formatDate(now: any) {
    var year = now.getFullYear() //取得4位数的年份
    var month = now.getMonth() + 1 //取得日期中的月份，其中0表示1月，11表示12月
    var date = now.getDate() //返回日期月份中的天数（1到31）
    var hour = now.getHours() //返回日期中的小时数（0到23）
    var minute = now.getMinutes() //返回日期中的分钟数（0到59）
    var second = now.getSeconds() //返回日期中的秒数（0到59）
    return (
      year +
      '-' +
      (month < 10 ? '0' + month : month) +
      '-' +
      (date < 10 ? '0' + date : date)
    )
  }
}
</script>
<style lang="scss" scoped>
.feature-out {
  padding: 20px;
}
.table-container {
  margin-bottom: 20px;
}
.form-table .label {
  text-align: right;
  line-height: 38px;
}
.sure {
  margin-top: 40px;
  display: inline-block;
  margin: 0 auto;
}
.filter-container {
  display: flex;
}
</style>
